/* pages/statistics/chart-preview/chart-preview.wxss */

ec-canvas {
  width: 100%;
  height: 100%;
}

.page{
  width: 100%;
  height: 100%;
}

.chart{
  background: #fff;
  /*-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);*/
  /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);*/
  /*border-radius: 8rpx;*/
  /*overflow: hidden;*/
}

.line-chart-container{
  height: 350rpx;
  width: 100%;
}


.line-chart-header-container{
  width: 100%;
}

.line-chart-header{
  height: 30rpx;
  display: flex;
  flex-wrap: wrap;
  margin-left: 20rpx;
  font-size: 15rpx;
}

.line-chart-header > .left-selector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 270rpx;
  flex: initial;
  font-size: 20rpx;
  border-right: 1rpx solid #E5E5E5;
}

.line-chart-header > .left-selector image {
  width: 24rpx;
  height: 24rpx;
  margin-left: 10rpx;
}

.line-chart-header > .right-selector {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  flex: 1;
  font-size: 20rpx;
  border-right: 1rpx solid #E5E5E5;
}

.line-chart-header > .right-selector > picker {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
}

.line-chart-header > .right-selector image {
  width: 14rpx;
  height: 14rpx;
  margin-left: 10rpx;
}

.index-spec{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  float: right;
  margin-right: 20rpx;
  flex: initial;
}

.index-spec > image{
  width: 12rpx;
  height: 12rpx;
}

.index-spec > text{
  padding: 2rpx 5rpx 2rpx 2rpx;
  font-size: 13rpx;
  color: #A1A6B3;
  text-decoration: underline;
}

.index-spec-dialog-background {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0rpx;
  right: 0rpx;
  display: flex;
  justify-content: center;
  font-size: 15rpx;
  z-index: 999;
  /*opacity: 0.4;*/
  background: rgba(0, 0, 0, 0.4);
}

.index-spec-dialog-background .index-spec-dialog{
  width: 253rpx;
  height: 285rpx;
  margin-top: 30rpx;
  background: #FFFFFF;
  border-radius: 8px;
}

.index-spec-dialog-background .index-spec-dialog .icon-container{
  position: fixed;
  right: 250rpx;
  top: 30rpx;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.index-spec-dialog-background .index-spec-dialog .icon-container .close-icon{
  width: 12rpx;
  height: 12rpx;
}

.index-spec-dialog-background .index-spec-dialog .title{
  font-size: 19rpx;
  margin-top: 17rpx;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.index-spec-dialog-background .index-spec-dialog .content-container{
  margin-top: 16rpx;
  width: 100%;
  display: flex;
}

.index-spec-dialog-background .index-spec-dialog .content-container .content-left{
  text-align: left;
  padding-left: 39rpx;
  flex: initial;
}

.index-spec-dialog-background .index-spec-dialog .content-container .content-right{
  text-align: left;
  flex: 1;
  padding-left: 9rpx;
}
.index-spec-dialog-background .index-spec-dialog .content-container .content{
  font-size: 16rpx;
  line-height: 33rpx;
}

.index-spec-dialog-background .bg-1{
  position: fixed;
  width: 100%;
  height: 220rpx;
}

.index-spec-dialog-background .bg-2{
  position: fixed;
  width: 150rpx;
  top: 220rpx;
  left: 0rpx;
  height: 988rpx;
}

.index-spec-dialog-background .bg-3{
  position: fixed;
  width: 150rpx;
  top: 220rpx;
  right: 0rpx;
  height: 988rpx;
}

.index-spec-dialog-background .bg-4{
  position: fixed;
  width: 450rpx;
  left: 150rpx;
  bottom: 0rpx;
  height: 480rpx;
}